<template>
  <el-card shadow="hover" style="height: 100%;" :body-style="{height:'100%'}">
    <template #header>
      <nav class="flex justify-between">
        <div>
          <el-button @click="dialogTableVisible= true;fileType = 'pdf'" type="primary">pdf预览</el-button>
          <el-button @click="dialogTableVisible= true;fileType = 'excel'" type="primary">excel预览</el-button>
          <el-button @click="dialogTableVisible= true;fileType = 'word'" type="primary">word预览</el-button>
        </div>

        <el-link type="primary" target="_blank" href="https://github.com/501351981/vue-office?tab=readme-ov-file">github地址</el-link>
      </nav>
    </template>


    <el-drawer :with-heade="false" v-model="dialogTableVisible" size="100%">
      <vue-office-pdf v-if="fileType == 'pdf'"  src="http://static.shanhuxueyuan.com/test.pdf"/>
      <vue-office-excel v-if="fileType == 'excel'" src="http://static.shanhuxueyuan.com/demo/excel.xlsx"/>
      <vue-office-docx v-if="fileType == 'word'" src="http://static.shanhuxueyuan.com/test6.docx"/>
    </el-drawer>
  </el-card>
</template>

<script setup lang="tsx">
//引入VueOfficePdf组件
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'
import VueOfficePdf from '@vue-office/pdf'


//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式



//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式


let fileType = shallowRef('pdf')
let dialogTableVisible = shallowRef(false)

</script>
